<template>
	<view class="cake-item margin-bottom">
		<image :src="gdata.img" mode="" @click="handleDetail"></image>
		<view class="flex justify-between align-center padding-lr-sm">
			<view class="">
				<view class="text-md text-bold margin-top-sm">
					{{gdata.name}}
				</view>
				<view class="text-xs margin-tb-xs">
					{{gdata.french}}
				</view>
			</view>
			<view class="cart-btn" @click="handlePopShow">
				<text class="iconfont icon-gouwuche"></text>
			</view>
		</view>
		<view class="text-sm text-price padding-lr-sm">
			{{gdata.price}}
		</view>
	</view>
</template>

<script setup>
import { onMounted } from "vue";
import {onLoad} from '@dcloudio/uni-app'
import {useStore} from 'vuex'
const props = defineProps({
	gdata:{
		type:Object,
		required:true
	}
})
const handleDetail = ()=>{
	uni.navigateTo({
		url:`/pages/detail/detail?id=${props.gdata.objectId}`
	})
}

const store = useStore()
const handlePopShow = ()=>{
	store.commit('cart/popDataMut',props.gdata)
	store.commit('cart/popShowMut',true)
	store.commit('cart/editIdxMut',-1)  
}
</script>

<style lang="scss">
.cake-item{
	width: 352upx;
	image{
		width: 100%;
		height: 352upx;
	}
}
.cart-btn{
	width: 60upx;
	height: 60upx;
	border-radius: 50%;
	text-align: center;
	line-height: 60upx;
	background-color: #FFE329;
}
</style>